import React, {PureComponent} from 'react';
import {screenWidth} from "../../utils/StylesUtils";
import * as colors from "../../utils/ColorUtils";
import {Actions} from 'react-native-router-flux';
import {
    TouchableOpacity,
    Image, Text, View,
    StyleSheet
} from 'react-native';

export default class SortItemView extends PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        const {item} = this.props.item;
        let name = "";
        for (let a of item.children) {
            if (name !== "") {
                name = name + "\t\t";
            }
            name = name + a.name;
        }
        return (
            <TouchableOpacity style={{flex: 1}} onPress={() => Actions.SortDetailPage({item:item,title:item.name})}>
                <View style={stylesList.container}>
                    <View style={stylesList.container_01}>
                        <View style={stylesList.container_02}>
                            <Text style={stylesList.sort}>{item.name}</Text>
                            <Text style={stylesList.detail}>{name}</Text>
                        </View>
                    </View>
                    <Image style={stylesList.goto} source={{uri: "icon_forward"}}/>
                </View>
            </TouchableOpacity>
        )
    }
}


const stylesList = StyleSheet.create({
    container: {
        flex: 1,
        width: screenWidth - 20,
        borderRadius: 5,
        backgroundColor: colors.white,
        margin: 10,
        marginBottom: 0,
        flexDirection: "row",
        alignItems: "center",
        padding: 5
    },
    container_01: {
        width: screenWidth - 50,
        flexDirection: "column",
    },
    container_02: {
        flex: 1,
        width: screenWidth - 50,
        flexDirection: "column",
    },
    sort: {fontSize: 14, color: colors.txt_6, margin: 5},
    detail: {fontSize: 13, color: colors.txt_8, margin: 5},
    goto: {width: 20, height: 20}
});